<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<div id="app">
    {{msg}}=={{val1}}==={{val2}}==={{check}}==={{gender}}==={{val3}}
    <hr>
    <input type="text" v-model="val1">
    <select v-model="val2" name="" id="">
      <option value="web">web</option>
      <option value="2">java</option>
      <option value="3">php</option>
    </select>
    <hr>
    <!-- //选中状态:true/false -->
    <input type="checkbox" value="222" v-model="check">
    <input type="checkbox" value="233" v-model="check">
    <hr> 男:
    <input type="radio" value="男" v-model="gender"> 女:
    <input type="radio" value="女" v-model="gender"> <textarea v-model="val3" name=" " id=" " cols="30 " rows="10 "></textarea>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.min.js "></script>

<script>
    const vu = new Vue({
        el: "#app ",
        data: {
            msg: 'hello vue',
            val1: 4,
            val2: 3,
            check: '',
            // 什么都不写可以获得布尔类型, 写空数组,可以获得value值
            gender: '男',
            val3: 'hello'


        },
        methods: {


        },
    })
</script>






</body>

</html>